<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8" />
    <title>3D</title>
    <script src="jquery.js"></script>
    <script>
    $(function(){
var left="rotate3d(1, 0, 0,0) rotate3d(0, 1, 0,-10deg) rotate3d(0, 0, 1, 0deg)",right="rotate3d(1, 0, 0,0) rotate3d(0, 1, 0,10deg) rotate3d(0, 0, 1, 0deg)",center="rotate3d(1, 0, 0,0) rotate3d(0, 1, 0,0deg) rotate3d(0, 0, 1, 0deg)";
   $(".left").hover(function() {
          $(".cube").css({transform:left});
         }, function() {
           $(".cube").css({transform:center});
   });

   $(".right").hover(function() {
              $(".cube").css({transform:right });
   }, function() {
        $(".cube").css({transform:center});
   });

    })
    </script>
    <style>
         body {
            overflow: hidden;
            }
        .box{
            position: absolute;
            //top: 0;
            top: -15;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            perspective:610px;

        }
        .cube {
            transform-style: preserve-3d;
            position: relative;
            font-size: 80px;
            width: 1081px;
            height:467px;
            margin:278px auto;
            transform-origin:center center 100px;
            transition: transform 1s ease-out;
            /*transition:transform 1s linear;*/
            /*transform: rotateY(80deg);*/
        }
        .cube > div {
            position: absolute;
            color: white;
            text-align: center;
            line-height: 200px;
        }

        .top {
            width:1081px;
            height:467px;
            transform:rotateX(90deg) translateY(-1px) translateZ(-1px);
            transform-origin: top;
        }
        .right {
            width:467px;
            height:467px;
            transform:rotateY(90deg) translateX(2px) translateZ(613px);
            transform-origin: right;
        }
        .left {
            width:467px;
            height:467px;
            transform:rotateY(-90deg) translateX(-1px) translateZ(-1px);
            transform-origin: left;
        }
        .bottom {
            width:1081px;
            height:467px;
            transform:rotateX(-90deg) translateZ(-2px);
            transform-origin: bottom;
        }
        .back {
            width:1081px;
            height:467px;
            transform:rotateY(180deg);
        }
        .person-center{
            position: absolute;
            top: 105px;
        }
        .map{
            position: absolute;
            top: 105px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="cube">
        <div class="back"><img src="center.jpg" alt=""></div>
        <div class="right hidden"><img src="right.jpg" alt=""></div>
        <div class="left hidden"><img src="left.jpg" alt=""></div>
        <div class="top hidden"><img src="top.jpg" alt=""></div>
        <div class="bottom hidden"><img src="bottom.jpg" alt=""></div>
        <div class="person-center"><img src="person-center.png" alt=""></div>

    </div>
</div>
</body>
</html>